<template>
  <a-modal
    :title="`商家商品${model ? '编辑' : '新增'}`"
    :width="800"
    :visible="visible"
    :centered="true"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-row>
          <a-col :span="12">
            <a-form-item label="名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['name']" placeholder="请填写名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="类型" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['kinds_name']" placeholder="请选择类型">
                <a-select-option :value="Number(key)" v-for="(item, key) in goodsKinds" :key="item">{{
                  item
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="价格" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input-number v-decorator="['price']" placeholder="请填写价格" :step="0.1" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="颜色尺寸" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['color_size']" placeholder="请填写颜色尺寸" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="商品介绍" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-textarea v-decorator="['content']" placeholder="请填写商品介绍" :auto-size="{ minRows: 3 }" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="主图" style="margin-bottom: 0" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <d-upload
                v-decorator="[
                  'img_url',
                  {
                    initialValue: '',
                  },
                ]"
              >
              </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="轮播图" style="margin-bottom: 0" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <d-upload
                v-decorator="[
                  'carousel_img',
                  {
                    initialValue: [],
                  },
                ]"
                :multiple="true"
              >
              </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="内容图" style="margin-bottom: 0" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <d-upload
                v-decorator="[
                  'content_img',
                  {
                    initialValue: [],
                  },
                ]"
                :multiple="true"
              >
              </d-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { GOODS_KINDS_MAP } from '@/mixins/merchantGoodsMixin'
import { merchantGoodsAdd, merchantGoodsEdit } from '@/api/merchantGoods'
import formModalMixin from '@/mixins/formModalMixin'
// 表单字段
const fields = ['name', 'id', 'img_url', 'kinds_name', 'carousel_img', 'content', 'color_size', 'price', 'content_img']

export default {
  name: 'MerchantGoodsForm',
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.editAction = merchantGoodsEdit
    this.addAction = merchantGoodsAdd
    return {
      goodsKinds: GOODS_KINDS_MAP,
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 21 }
        }
      }
    }
  }
}
</script>
